<template>
  <el-input
    v-model="val"
    :placeholder="placeholder"
    @blur="change"
    @keyup.enter.native="change"
    class="input-search-container"
    clearable
  >
    <el-button slot="append" icon="el-icon-search" @click="change"></el-button>
  </el-input>
</template>
<script>
export default {
  name: 'InputSearch',
  props: {
    placeholder: {
      type: String,
      default: '请输入搜索内容'
    },
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      val: ''
    }
  },
  methods: {
    change() {
      this.$emit('input', this.val)
      this.$emit('change', this.val)
    }
  },
  watch: {
    value(val) {
      this.val = val
    }
  }
}
</script>

<style scoped></style>
